<template>
  <div class="flex space-x-4 sm:justify-center">
    <div class="text-gray-1800 share-item group cursor-pointer to-download-img"
      @click="download('pic')">
      <span class="sr-only">img</span>
      <svg-icon className="w-8 h-8 text-purple-1300 group-hover:opacity-90"
        iconName='image_download'
        v-if="downloadType!=='pic'"></svg-icon>
      <img :src="loadingImage"
        v-if="downloadType==='pic'"
        class="loading w-8 h-8"
        alt=""
        srcset="">
    </div>
    <div class="text-gray-1800 share-item group cursor-pointer to-download-pdf"
      @click="download('pdf')">
      <span class="sr-only">pdf</span>
      <svg-icon className="w-8 h-8 text-purple-1300 group-hover:opacity-90"
        iconName='pdf_download'
        v-if="downloadType!=='pdf'"></svg-icon>
      <img :src="loadingImage"
        v-if="downloadType==='pdf'"
        class="loading w-8 h-8"
        alt=""
        srcset="">
    </div>
  </div>
</template>

<script>
export default {
  name: 'DownloadOptions',
  props: {
    dStatus: {
      type: String | null,
      default: null,
    },
  },
  data() {
    return {
      downloadType: null,
      loadingImage: require('@/static/images/loading.png'),
      timer: null,
    }
  },
  watch: {
    dStatus: {
      immediate: false,
      handler(val) {
        this.downloadType = val
      },
    },
  },
  methods: {
    download(type) {
      this.downloadType = type
      this.$nextTick(() => {
        this.timer = setTimeout(() => {
          this.$emit('toDownload', type)
        }, 100)
      })
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer)
    }
  },
}
</script>